// import { useState, useRef } from 'react';
// function App() {
//   const [count, setCount] = useState(0);
//   const num = useRef(0);
//   let x = 0;
//   const handleClick = () => {
//     setCount(count + 1);
//     num.current++;
//     x++;
//     console.log(num.current, x);
//   };
//   return (
//     <div>
//       hello App
//       <button onClick={handleClick}>计数</button>
//       <br />
//       {/* 因为修改ref.current值不会触发渲染，不要在jsx中使用ref */}
//       {count}, {num.current}, {x}
//     </div>
//   );
// }
// export default App;
// ref使用场景
// 点击数字加1事件触发定时器，可以使用ref避免开启多个相同定时器
import { useState, useRef } from 'react';
function App() {
  const [count, setCount] = useState(0);
  const timer = useRef(null);
  // let timer; //因为timer会因为setCount重新出发渲染函数，导致每次都置为初始值underfined
  // 所以要改为，有记忆功能的ref
  const handleClick = () => {
    setCount(count + 1);
    if (timer.current) {
      clearTimeout(timer);
    }
    timer.current = setTimeout(() => {
      console.log('1234');
    }, 1000);
  };
  return (
    <div>
      hello App
      <button onClick={handleClick}>计数</button>
      <br />
      {count}
    </div>
  );
}
export default App;
